<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .layout {
            width: 960px;
            margin: 0 auto;
            background-color: #f0f0f0;
        }
        .layout::after {
            content: "";
            display: block;
            clear: both;
        }
        .layout ul li {
            width: 110px;
            height: 40px;
            border: 1px solid #ccc; 
            box-sizing: border-box;
            margin: 5px 5px;
            text-align: center;
            line-height: 40px;
            float: left;
            background-color: #fff;
        }
        .layout ul li.active {
            background-color: deepskyblue;
            color: #fff;
        }
    </style>
</head>
<body>

    <!-- <div class="layout">
        <ul>
            <li></li>
        </ul>
    </div> -->


    <script src="./data.js"></script>
    <script>
        // 要求：
            // 1. 渲染 data.js文件的名单数组，并通过随机索引值设置一个 "名字" 高亮（即蓝色背景，白色字体）
            // 2. 每个刷新页面可以设置随机 "名字" 高亮 

            // 编写函数 
            var random = function(){
                // 写下你的代码1
                var too = Math.random() * 76;
                var she = Math.floor(too);
                return she;
            }
            // 随机数
            var num = random();
            console.log(num);

            var template = function(array){
                // 写下你的代码2
                var str = "";
                str += "<div class='layout'>";
                    str +="<ul>"
                for(i = 0 ; i <array.length ; i ++) {

                       if(i==num) {
                           str +="<li class='active'>"+array[i]+"</li>"
                       } else {
                           str+="<li>"+array[i]+"</li>"
                       }
                }
                str +="</ul>"
                str +="</div>"
                document.write(str);
            }
            template(student_array );


    </script>
</body>
</html>